<template>
  <div class="card-total" :class="[size + '-size', color + '-color']">
    <span class="card-total__value" :class="{ 'is-link': showUnderLine }" @click="valueClick">{{ price }}</span>
    <span class="card-total__unit">{{ unit }}</span>

    <a-tooltip v-if="tooltipList">
      <icon-question-circle class="card-help-icon" />
      <template #content>
        <div v-for="(item, index) in tooltipList" :key="index">{{ item }}</div>
      </template>
    </a-tooltip>
  </div>
</template>

<script setup name="CardTotal">
  import { computed } from 'vue'
  import { formatNumber } from '@/utils/index'
  const props = defineProps({
    value: [String, Number],
    unit: {
      type: String,
      default: '元',
    },
    thousandth: {
      type: Boolean,
      default: false,
    },
    tooltip: String,
    linkValue: Boolean,
    color: String, // default | green | white | orange | purple | light-green
    // 大小
    size: {
      type: String,
      default: 'default', // default | large
    },
  })

  // 兼容数组
  const tooltipList = computed(() => {
    if (!props.tooltip) return ''
    if (typeof props.tooltip === 'string') {
      return [props.tooltip]
    } else if (Array.isArray(props.tooltip)) {
      if (props.tooltip.length == 0) return ''
      return props.tooltip
    }
    return ''
  })

  const emits = defineEmits(['valueClick'])
  const price = computed(() => {
    let val = Number(props.value) || 0
    if (props.unit != '元') return val
    return formatNumber(val, props.thousandth)
  })

  // 是否显示下划线
  const showUnderLine = computed(() => {
    let val = Number(props.value) || 0
    if (val == 0) {
      return false
    }
    return props.linkValue
  })

  const valueClick = () => {
    if (showUnderLine.value) emits('valueClick')
  }
</script>

<style lang="less" scoped>
  .card-total {
    align-items: center;
    .card-total__value {
      font-weight: 600;
      font-size: 24px;
      color: #1890ff;
      line-height: 24px;
      &.is-link {
        position: relative;
        cursor: pointer;
        &:hover {
          color: #1890ff;
          &::after {
            content: '';
            width: 100%;
            height: 1px;
            background-color: #1890ff;
            position: absolute;
            left: 0;
            bottom: 3px;
          }
        }
      }
    }
    .card-total__unit {
      font-weight: 400;
      font-size: 12px;
      color: #1d2129;
      line-height: 14px;
      margin-left: 8px;
      margin-bottom: 2px;
    }

    &.large-size {
      display: flex;
      align-items: center;
      height: 40px;
      line-height: 40px;
      .card-total__value {
        color: #fff;
        font-size: 28px;
      }
      .card-total__unit {
        font-size: 28px;
        color: #fff;
      }
      .card-help-icon {
        margin-left: 10px;
        font-size: 20px;
        color: #fff;
      }
    }

    &.white-color {
      .card-total__value {
        color: #fff;
      }
      .card-total__unit {
        color: #fff;
      }
      .card-help-icon {
        color: #fff;
      }
    }

    &.green-color {
      .card-total__value {
        color: #00b42a;
      }
      .card-help-icon {
        color: #00b42a;
      }
    }

    &.purple-color {
      .card-total__value {
        color: #5c37ff;
      }
      .card-help-icon {
        color: #5c37ff;
      }
    }

    &.orange-color {
      .card-total__value {
        color: #ff7d00;
      }
      .card-help-icon {
        color: #ff7d00;
      }
    }
    &.light-green-color {
      .card-total__value {
        color: #2ec350;
      }
      .card-help-icon {
        color: #2ec350;
      }
    }
  }
</style>
